<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import {
    queryMatchInfoByConsole,
    queryMatchBillByConsole,
  } from '@/api/sorting-matching';

  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
    },

    {
      title: '图号',
      dataIndex: 'itemCode',
    },
    {
      title: '数量',
      dataIndex: 'itemQty',
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
    },
    {
      title: '机型',
      dataIndex: 'productName',
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
    },
    {
      title: '架次',
      dataIndex: 'startPlaneNo',
    },
    {
      title: '工作包编号',
      dataIndex: 'packageCode',
    },
    {
      title: '装配图号',
      dataIndex: 'repartAss',
    },
    {
      title: '主键',
      dataIndex: 'msAoMatchBillId',
    },
  ];
  const columnsTwo: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
    },

    {
      title: 'AO号',
      dataIndex: 'aoCode',
    },
    {
      title: '机型',
      dataIndex: 'productName',
    },
    {
      title: '批次',
      dataIndex: 'batchNo',
    },

    {
      title: '架次',
      dataIndex: 'startPlaneNo',
    },
    {
      title: '工作包编号',
      dataIndex: 'packageCode',
    },
    {
      title: '需求数量',
      dataIndex: 'itemQty',
    },
    {
      title: '配套数量',
      dataIndex: 'matchQty',
    },
    {
      title: '分拣数量',
      dataIndex: 'packageCount',
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
    },
    {
      title: '配套状态',
      dataIndex: 'state',
    },
    {
      title: '分拣状态',
      dataIndex: 'sortingStatus',
    },
    {
      title: '缺件类型',
      dataIndex: 'aState',
    },

    {
      title: '主键',
      dataIndex: 'msAoMatchInfoId',
    },
  ];
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  const localTwoTableData = ref<any[]>([]);
  // 数据库一共有多少条

  const flowQueryData = ref<any>({});

  async function getLocalTwoTableData() {
    const result: any = await queryMatchInfoByConsole(flowQueryData.value);
    localTwoTableData.value = result?.retData || [];
    const data: any = await queryMatchBillByConsole(flowQueryData.value);
    localTableData.value = data?.retData || [];
  }
  watch(
    () => booleanStore.list,
    () => {
      if (booleanStore.num7 === 9) {
        flowQueryData.value = booleanStore?.list[0];
        getLocalTwoTableData();
      }
    }
  );
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">AO物料清单 / 配套物料清单</div>
    </template>

    <a-row :gutter="10">
      <!-- AO物料清单 -->
      <a-col :span="8">
        <a-table
          :stripe="true"
          class="top-table"
          :columns="columns"
          :data="localTableData"
        >
          <template #id="{ record }">
            {{ localTableData.indexOf(record) + 1 }}
          </template>
        </a-table>
      </a-col>
      <!-- 配套物料清单 -->
      <a-col :span="16">
        <a-table
          :stripe="true"
          class="table"
          :columns="columnsTwo"
          :data="localTwoTableData"
        >
          <template #id="{ record }">
            {{ localTwoTableData.indexOf(record) + 1 }}
          </template>
        </a-table>
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .table {
    white-space: nowrap;
  }
</style>
